<template>
  <div class="order">
    <van-tabs v-model:active="activeName" @click-tab="getList">
      <van-tab title="全部" name="">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });">
              <template #value>
                <span v-if="i.status=='待支付'"  style="color: red;">{{i.status}}</span>
                <span v-else >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;"  >请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
      </van-tab>
      <van-tab title="待支付" name="待支付">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span style="color: red;">{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
      <van-tab title="进行中" name="进行中">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
      <van-tab title="已完成" name="已完成">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
      <van-tab title="待评价" name="待评价">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
    </van-tabs>
  </div>
 <div class="bql">
  <p><van-tabbar v-model="active" active-color="rgb(16, 185, 252)">
    <van-tabbar-item icon="home-o"  url="/">
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.sy" />
      </template>首页</van-tabbar-item>
    <van-tabbar-item icon="search"  url="/fw">
      <template #icon="props" >
        <img :src="props.active ? icon.active : icon.fw " />
      </template>服务</van-tabbar-item>
    <van-tabbar-item icon="friends-o" url="/dd">
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.dd" />
      </template>订单</van-tabbar-item>
    <van-tabbar-item icon="setting-o" url="/my">
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.inactive" />
      </template>我的</van-tabbar-item>
  </van-tabbar></p>
 </div>
</template>

<script>
import { ref,onMounted } from 'vue';
import { createApp } from 'vue';
import { Icon,Tabbar, TabbarItem, } from 'vant';
import { useRoute} from 'vue-router';
import axios from 'axios';


export default {
  setup() {
    const islogin = ref(localStorage.getItem('userid'));
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const route = useRoute();
    const active = ref(2);
    const activeName = ref(route.query.activeName !== undefined ? route.query.activeName : '');
    const icon = {
      sy:'/public/fangzi.jfif',
      fw:'/public/erji.jfif',
      dd:'/public/dingdan.jfif',
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    const getList = () => {
      axios.get('http://localhost:8000/zhxy/order/list/',{params:{userid:islogin.value, status:activeName.value}}).then((res) => {
        list.value = res.data.data;
        loading.value = false;
        console.log(list.value,11111);
        if (list.value.length >= 1) {
          finished.value = true;
        }
      })
    onMounted(() => {
      getList();
    })
    }
    return {
      route,
      islogin,
      list,
      loading,
      finished,
      active,
      activeName,
      Tabbar,
      TabbarItem,
      getList,
      icon,
      onMounted,
    };
  },
};
</script>
<style scoped>
.bql {
  position: absolute;
  left: auto;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 15%;
}
van-tabbar-item {
  display: inline;
  width: 25%;
}
img {
  display: inline;
}
</style>